import { useEffect, useState, useRef } from 'react'
import { Link, useHistory } from 'react-router-dom'
import styles from './index.module.scss'
const NodFount = () => {
  const [count, setCount] = useState(5)
  const timerRef = useRef(-1)
  const history = useHistory()
  useEffect(() => {
    // 开启定时器
    timerRef.current = setInterval(() => {
      setCount((count) => count - 1)
    }, 1000)
    return () => {
      clearInterval(timerRef.current)
    }
  }, [])
  useEffect(() => {
    if (count === 0) {
      history.replace('/home')
    }
  }, [count, history])
  return (
    <div className={styles.root}>
      <h1>对不起，你访问的页面不存在。。。</h1>
      <p>
        {' '}
        将在 {count} 秒后，返回首页（或者：点击立即返回
        <Link to="/home">首页</Link>）
      </p>
    </div>
  )
}
export default NodFount
